<template>
  <el-dialog
    title="黑名单限制行为"
    :visible.sync="visible"
    width="30%"
    :before-close="handleClose"
  >
    <el-checkbox v-model="restrictiveActionOrder">下单</el-checkbox>
    <el-checkbox v-model="restrictiveActionComment">评论</el-checkbox>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSumbit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { SETBLACKLIST } from "@/service/shop";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    val: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      allList: [],
      restrictiveActionOrder: false,
      restrictiveActionComment: false
    };
  },
  watch: {
    val(v) {
      if (JSON.stringify(v) !== "{}") {
        this.allList = v;
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit("outDialog", "showField", false);
    },
    async handleSumbit() {
      let arr = [];
      this.allList.forEach(ele => {
        arr.push(ele.member_id);
      });
      await SETBLACKLIST({
        member_ids: arr.join(","),
        restrictive_action_order: this.restrictiveActionOrder ? 1 : 0,
        restrictive_action_comment: this.restrictiveActionComment ? 1 : 0
      }).then(({ code, msg }) => {
        if (code === 200) {
          this.restrictiveActionOrder = false;
          this.restrictiveActionComment = false;
          this.$emit("outDialog", "showField", true);
        }
        this.$message({
          message: msg,
          type: code === 200 ? "success" : "error"
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.sfBox {
  div {
    width: 100%;
    height: 40px;
  }
}
</style>
